<template>
    <div class="contion">
        <div class="cart">
            <div class="cart_1">
                <div>
                    <van-icon name="arrow-left" size="20" @click="back()" style="margin-left:20px"/>
                </div>
                <span style="margin-left:220px"><b>购物车</b></span>
            </div>
            <div class="cart_2">
                <div v-for="(j,k) in cartlist.data" :key="k" class="cart_2_1">
                    <img :src="j.shoe.image" style="width:150px;height:150px;">
                    <div class="cart_2_2">
                        <span style="margin-top:10px;margin-left:3px;width:200px">{{ j.shoe.name }}</span>
                        <span style="margin-top:20px">￥{{ j.shoe.price }}</span>
                        <el-input-number v-model="j.count" @change="handleChange(j)" :min="1" :max="10" style="margin-top:20px"/>
                    </div>
                    <van-icon name="delete-o" size="25" style="color:#E44F32;margin-top:95px;margin-left:100px" @click="del(j)"/>
                </div>
                <div class="cart_3">
                    <div class="cart_3_1">
                        <span style="margin-right:360px">共计</span>
                        <span>￥{{ cartlist.total }}</span>
                    </div>
                    <div class="cart_3_2">
                        <span style="margin-right:360px">折扣</span>
                        <span>积分扣除￥{{ cartlist.score }}</span>
                    </div>
                    <div class="cart_3_3">
                        <span style="margin-right:360px">运费</span>
                        <span>￥0</span>
                    </div>
                </div>
                <div class="cart_4">
                    <span style="margin-right:430px"><b>总计</b></span>
                    <span><b>￥{{ cartlist.totals }}</b></span>
                </div>
                <div class="cart_5">
                    <el-button @click="address"><b>继续结账 →</b></el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const back = () =>{
    router.back();
}

let cartlist = ref([])

const getcart = () => {
    axios.get(`http://127.0.0.1:8000/home/cart/?user=${localStorage.getItem('userid')}`).then(res=>{
        cartlist.value = res.data
        
    })
}

const handleChange = (j) => {
    axios.put("http://127.0.0.1:8000/home/cart/", {
        user: localStorage.getItem('userid'),
        shoes: j.shoes,
        count: j.count
    }).then(res=>{
        console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            getcart()
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}

const del = (j) => {
    axios.delete(`http://127.0.0.1:8000/home/cart/?id=${j.id}`).then(res=>{
        console.log(res)
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            getcart()
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}

const address = () =>{
    router.push('/address')
}
onMounted(()=>{
    getcart()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.cart{
    width: 600px;
    height: 1150px;
    display: flex;
    flex-direction: column;
    /*background-color: aqua;*/
}

.image{
    float: right;
    border-radius: 50px;
    margin-right: 80px;
}

.cart_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
    text-align: center;
    font-size:25px;
    display: flex;
    flex-direction: row;
}

.cart_2_1{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left: 20px;
}

.cart_2_2{
    display: flex;
    flex-direction: column;
    margin-left: 40px;
}

.cart_3{
    width: 530px;
    margin-top: 50px;
    margin-left: 20px;
    border-bottom: 1px solid darkgray;
}

.cart_3_1{
    margin-bottom: 10px;
}

.cart_3_2{
    margin-bottom: 10px;
}

.cart_3_3{
    color: #06C270;
    margin-bottom: 20px;
}

.cart_4{
    margin-left: 20px;
    margin-top: 20px;
    font-size: 20px;
}

.cart_5{
    width: 300px;
    height: 50px;
    background-color: #E44F32;
    margin-bottom: 20px;
    border-radius: 5px;
    margin-left: 150px;
}

.cart_5 button{
    height: 50px;
    background-color: #E44F32;
    border: none;
    color: #FFFFFF;
    margin-left: 100px;
}

</style>